<template>
    <div>
        <ComA :say="say"/>
        <hr/>
        <ComB :say="say"/>
        <hr/>
        <div>父组件接收子组件的值：{{num}}</div>
        <ComD :propnum="num" @childEvent="showChildEvent"/>
        <hr/>
        <div>
            {{num}}
        </div>
        <ComE/>

        <hr/>
        
        <ComF ref="comfRef"/>
        <el-button @click="getcomFFn">调用组件F函数</el-button>

        <hr/>

        <comG :comGData="comGData"/>

        <hr/>
        <h1>ref不是响应式</h1>
        <ul v-if="isShowcomG">
            <li v-for="(item) in 3" :key="item">
                <div :ref="'refObserve'+item">
                    {{item}}
                </div>
            </li>
        </ul>
        
    </div>
</template>
<script>
import ComA from './compone/comA.vue'
import ComB from './compone/comB.vue'
import ComD from './compone/comD.vue'
import ComE from './compone/comE.vue'
import ComF from './compone/comF.vue'
import ComG from './compone/comG.vue'
export default {
    components:{
        ComA,
        ComB,
        ComD,
        ComE,
        ComF,
        ComG
    },
    data(){
        return{
            say: 2,
            num:0,
            comGData:[
                {
                    name: "小李",
                    age: 20
                },
                {
                    name: "小王",
                    age: 26
                },
                {
                    name: "小张",
                    age: 19
                },
                {
                    name: "小刘",
                    age: 23
                }
            ],
            refObs:"refObserve",
            isShowcomG: false
        }
    },
    methods:{
        showChildEvent(num){
            // 获取子组件传递过来的值
            this.num = num
        },
        myEventnum() {
            this.num++
        },
        getcomFFn(){
            // 调用子组件的函数
            this.$refs.comfRef.changeFData()
        },
        parnetEmitShowG(payreod) {
            console.log("获取子组件的参数：",payreod);
        },
        showcomG() {
            this.isShowcomG = !this.isShowcomG
        }

    },
    beforeCreate(){
        // console.log("beforeCreate:",this.$refs.refItems);
        // console.log("beforeCreate:",this.num);
        console.log("父组件beforeCreate");
    },
    created() {
        // console.log("created:",this.$refs.refItems);
        // console.log("created:",this.num);
        console.log("父组件created");
    },
    beforeMount(){
        // console.log("beforeMount:",this.$refs.refItems);
        // console.log("beforeMount:",this.num);
        console.log("父组件beforeMount");
    },
    mounted(){
        console.log("父组件mounted");
        setTimeout(() => {
            this.isShowcomG = true
            console.log("111",this.$refs.refObserve1);
            this.$nextTick(()=>{
            console.log("222",this.$refs.refObserve1);
            })
            
        }, 4000);
        
    }
    
}
</script>